import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
let scene, camera, renderer, controls

function init() {
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 0, 5)
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  const axesHelper = new THREE.AxesHelper(5)
  scene.add(axesHelper)
};
function renderLoop() {
  renderer.render(scene, camera)
  controls.update()
  requestAnimationFrame(renderLoop)
}

 // 目标：了解顶点坐标绘制正方形
  // 1. 准备 BufferGemotry 缓冲几何图形
  // 2. 准备 32 位浮点数的数组，定义矩形的顶点位置
  // 3. 准备 BufferAttribute 属性缓冲对象，保存几何图形的属性值
  // 4. 把属性设置给几何图形对象
  // 5. 准备材质创建物体并加入场景中

  // 1. 准备 BufferGemotry 缓冲几何图形（灵活表示图形）
// 正方形
function createBasic() {
    const geometry = new THREE.BufferGeometry();
    // 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
    // 因为在两个三角面片里，这两个顶点都需要被用到。
      // 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
  // 因为在两个三角面片里，这两个顶点都需要被用到。
  // 注意：three.js 内部需要计算坐标值
  // 顶点坐标（逆时针描述-正面渲染）
  // 2. 准备 32 位浮点数的数组，定义矩形的顶点位置
    const vertices = new Float32Array( [
      0, 0, 0,
      1.0, 0, 0,
      0, 1.0, 0,

      1.0, 0, 0,
      1.0, 1.0, 0,
      0, 1.0, 0
    ] );
    
    // itemSize = 3 因为每个顶点都是一个三元组。
    geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
// 创建顶点颜色数据
// 颜色数据，每个点 rgb 值（对比范围0-1）
const colorArr = new Float32Array([
  0, 0, 1.0,
  0, 1.0, 0,
  0, 1.0, 0,

  0, 1.0, 0,
  1.0, 0, 0,
  0, 1.0, 0
])
// 设置几何图形的color属性
geometry.setAttribute('color', new THREE.BufferAttribute(colorArr, 3))
 // 3. 设置材质对象中顶点着色属性 vertexColors 为 true（支持使用顶点着色而不是面着色）
  // 材质本身颜色也会参与到像素点颜色的计算中
    const material = new THREE.MeshBasicMaterial( {  vertexColors: true } );
  const mesh = new THREE.Mesh( geometry, material );
  scene.add(mesh)
}


init()
createBasic()
renderLoop() 
 

